<template>
  <div id="app">
    <el-select v-model="value1" placeholder="请选择学院" >
      <el-option
        v-for="item in firstList"
        :key="item"
        :label="item"
        :value="item">
      </el-option>
    </el-select>

    <el-select v-model="value2" placeholder="请选择年级">
      <el-option
        v-for="item in secondList"
        :key="item"
        :label="item"
        :value="item">
      </el-option>
    </el-select>

<!--    <el-select v-model="value3" placeholder="请选择班级">
      <el-option
        v-for="item in thirdList"
        :key="item"
        :label="item"
        :value="item">
      </el-option>
    </el-select> -->
    &nbsp;
    <el-button type="primary" @click="reset()" size="small">重置</el-button>
    <el-button type="average" @click="average()" size="small" :disabled="value2.length !== 0">求平均数</el-button>
    <br />
    <br />
    <div id="main" style="width: 800px;height:600px;margin: 0 auto;"></div>
  </div>
</template>
<script>
import { debounce } from '@/myUtils/debounce'
export default {
  name: 'app',
  data () {
    return {
      timeout: '',
      MapData: [],
      levelFirst: '',
      firstList: [],
      levelSecond: '',
      secondList: [],
      levelThird: '',
      thirdList: [],
      levelFourth: '',
      fourthList: [],
      dataList: [], // 整个树表
      erDataList: [], // 存二级表
      sanDataList: [], // 存三级表
      options: [{
        value: '大庆师范学院',
        label: '大庆师范学院'
      }],
      temp: {
        value: '',
        label: ''
      },
      value1: '', // 学院
      value2: '', // 年级
      value3: '', // 班级
      v2length: 0,
      params: {
        institute: '',
        grade: '',
        classe: ''
      },
      data: {
        ids: '',
        flag: ''
      }
    }
  },
  // 当检测到value1变的时候，查询原本的dataList通过对应的位置,
  // 然后获取secondList中的值,依次类推，当监听到上一级变化的时候，后面的数据变为空
  watch: {
    value1 (newname, oldname) {
      // 进行重置
      this.secondList = []
      this.value2 = ''
      this.thirdList = []
      this.value3 = ''
      for (let k = 0; k < this.dataList.length; k++) {
        if (this.dataList[k].name === newname) { // 检测选择了哪个
          // 构建参数
          this.data.ids = this.dataList[k].parentIds + this.dataList[k].id + ','
          this.params.institute = newname
          this.getMap()
          // 更改选择框
          this.erDataList = this.dataList[k].children
          for (let i = 0; i < this.erDataList.length; i++) {
            this.secondList.push(this.erDataList[i].name)
          }
          return
        }
      }
    },
    value2 (newname, oldname) {
      this.v2length = this.value2.length
      this.data.flag = ''
      this.thirdList = []
      this.value3 = ''
      for (let w = 0; w < this.dataList.length; w++) {
        if (this.erDataList[w].name === newname) {
          // 构建参数
          this.data.ids = this.erDataList[w].parentIds + this.erDataList[w].id + ','
          this.params.grade = newname
          this.getMap()
          // 更改选择框
          this.sanDataList = this.erDataList[w].children
          for (let a = 0; a < this.sanDataList.length; a++) {
            this.thirdList.push(this.sanDataList[a].name)
          }
          return
        }
      }
    }
  },
  mounted () {
    this.$http({
      url: '/graph/Graph/getPointOrEveragePointUI',
      method: 'post',
      data: {
        ids: '0,398dc5de2d504c429ffa83bc3ba5a988,',
        flag: ''
      },
      params: {
        institute: '',
        grade: '',
        classe: ''
      }
    }).then(({data}) => {
      this.MapData = data.GraphData.data
      this.drawChart()
    })
    this.getTree()
  },
  methods: {
    average () {
      if (this.data.ids === '') {
        this.data.ids = '0,398dc5de2d504c429ffa83bc3ba5a988,'
      }
      this.data.flag = 'average'
      this.$http({
        url: '/graph/Graph/getPointOrEveragePointUI',
        method: 'post',
        data: this.data,
        params: this.params
      }).then(({data}) => {
        this.MapData = ''
        this.drawChart()
        this.MapData = data.GraphData.data
        this.drawChart()
      })
    },
    reset () {
      this.value1 = ''
      this.value2 = ''
      this.params.classe = ''
      this.params.institute = ''
      this.params.grade = ''
      this.data.ids = '0,398dc5de2d504c429ffa83bc3ba5a988,'
      this.data.flag = ''
      debounce(this.getMap, 2000, null, this)()
    },
    getMap () {
      this.$http({
        url: '/graph/Graph/getPointOrEveragePointUI',
        method: 'post',
        data: this.data,
        params: this.params
      }).then(({data}) => {
        this.MapData = data.GraphData.data
        this.drawChart()
      })
    },
    getTree () {
      this.$http({
        url: '/sys/office/treeData',
        method: 'get'
      }).then(({data}) => {
        // 把整个子节点都存到树表中
        this.dataList = data.treeData[0].children
        this.getNext()
      })
    },
    getNext () {
      for (let i = 0; i < this.dataList.length; i++) {
        this.firstList.push(this.dataList[i].name)
      }
    },
    drawChart () {
      var chartDom = document.getElementById('main')
      var myChart = this.$echarts.init(chartDom)
      var option
      option = {
        title: {
          text: '得分情况图表',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            color: [ '#46a4f7', '#36cbcb', '#11D074', '#fad337', '#9b5de5', '#f97476', '#655b7c', '#ffa62bw', '#ffb8ff', '#80eb9a', '#feebad', '#c49f86', '#4aa0b6', '#babd8e' ],
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: this.MapData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      option && myChart.setOption(option)
    }
  }

}
</script>
